<template>
  <BasicLayout title="登录">
    <template slot="content">
      <div class="logo-wrapper">
        <img class="logo" src="@/assets/logo.png" />
      </div>
      <div class="login-input">
        <el-input
          v-model="phone"
          type="tel"
          placeholder="手机号"
          prefix-icon="el-icon-mobile-phone"
        />
        <el-input
          v-model="password"
          type="password"
          placeholder="请输入登录密码"
          prefix-icon="el-icon-lock"
        />
      </div>
      <div class="login-wrapper">
        <el-button class="login-btn" type="primary" round @click="login"
          >登录</el-button
        >
        <div class="login-bar">
          <div class="forget">
            <el-link type="primary" @click="alert()">忘记密码？</el-link>
          </div>
          <div class="register">
            <el-link type="primary" @click="register">立即注册</el-link>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="recommend-border"></div>
        推荐使用微信登录
        <div class="recommend-border"></div>
      </div>
      <div class="chat-login">
        <el-button class="chat-button" type="primary" round>
          微信一键登录
        </el-button>
      </div>
      <div class="protocol">
        登录注册即表示同意
        <span class="protocol-highlight">服务条款</span>
        和
        <span class="protocol-highlight">隐私条款</span>
      </div>
    </template>
  </BasicLayout>
</template>
<script>
import BasicLayout from "@/components/BasicLayout/index.vue";
import { accounts } from "./constants";
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  components: {
    BasicLayout,
  },
  methods: {
    register() {
      this.$router.push({ name: "Register" });
    },
    alert() {
      alert(
        `测试账号为\n个人账号:${accounts.person.phone}\n员工账号:${accounts.staff.phone}\n密码可不填`
      );
    },
    login() {
      if (this.phone === accounts.person.phone) {
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.$router.push({ name: "SelectPackage" });
      } else if (this.phone === accounts.staff.phone) {
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.$router.push({ name: "SelectOrder" });
      } else {
        this.$message({
          message: "账号密码错误",
          type: "error",
        });
      }
    },
  },
};
</script>
<style scoped>
.logo-wrapper {
  text-align: center;
  margin: 30px auto;
}
.logo {
  width: 200px;
}
.login-input {
  margin: 10px 30px 50px;
}
.login-input >>> .el-input__inner {
  outline: none;
  border: 0;
  font-size: 15px;
  border-bottom: 1px solid #c0c4cc;
}
.login-wrapper {
  width: 90%;
  margin: 50px auto;
}
.recommend {
  font-size: 0.9em;
  display: flex;
  margin: 100px auto 50px;
  color: #c0c4cc;
}
.recommend-border {
  flex: 1;
  border-bottom: 1px solid black;
  margin: auto 10px;
  color: #c0c4cc;
}
.login-btn {
  width: 100%;
  display: block;
  margin: 0px auto;
  background-color: #8cc5ff;
  border: none;
  font-size: 15px;
}
.login-bar {
  position: relative;
  margin: 5px 0;
}
.login-bar .forget {
  position: absolute;
  left: 10px;
}
.login-bar .register {
  position: absolute;
  right: 10px;
}
.el-link.el-link--primary {
  color: #8cc5ff;
}

.chat-login {
  width: 90%;
  margin: auto;
}
.chat-button {
  width: 100%;
}
.chat-login .el-button--primary {
  background-color: #67c23a;
  border: none;
}
.protocol {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8em;
  color: #c0c4cc;
}
.protocol-highlight {
  color: rgb(121, 187, 255);
}
</style>
